import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

  const routes = []

const router = new VueRouter({
  routes: [
    {
      path: '/From',
      component: () => import('../views/element/Form'),      
    },
    {
      path: '/Table',
      component: () => import('../views/element/Table'),      
    },
    {
      path: '/Pop',
      component: () => import('../views/element/Pop'),      
    },
    {
      path: '/Layout',
      component: () => import('../views/element/Layout'),      
    },
    {
      path: '/',
      component: () => import('../views/Parent'),
      // 配置重定向, 访问路径,重定向到这
      redirect: '/From'

    },
    {
      // 访问的路径,定义为/home
      //后面带:id设置成动态路由后, 如果不带参数id,就进不去这个页面了
      path: '/home/:id',
      name: 'home',
      /*访问的组件,使用路由的懒加载引用这个组件,路由的懒加载是什么意思呢,不使用懒加载的话, 默认会渲染出所有路由里面的组件,
        空白的时间比较久, 懒加载,就之后进入这个组件的时候才会加载这个组件, 而不是统一加载,一般我们都是通过路由的懒加载来引
        入组件的
      */
      component: () => import('../views/Home'),
      children: [{
        path: '/child',
        component: () => import('../views/Child')
      }]
    }
]
})

export default router
